<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useColorMode } from '@vueuse/core'
import { useInitWebsiteInfo } from '@/composables/useInitWebsiteInfo'

const mode = useColorMode({ storageKey: 'user-theme' })

const activeTab = ref<'about' | 'skills' | 'experience' | 'contact'>('about')
function activeTabClick(tab: 'about' | 'skills' | 'experience' | 'contact') {
  activeTab.value = tab
}

// 检测是否为移动端
const isMobile = ref(window.innerWidth <= 768)

const handleResize = () => {
  isMobile.value = window.innerWidth <= 768
  if (!isMobile.value) {
    activeTab.value = 'about'
  }
}

const { webInfo, loading } = useInitWebsiteInfo()

// 技能数据
const skills = [
  { name: 'Java', level: 95, color: '#f89820' },
  { name: 'Spring Boot', level: 90, color: '#6db33f' },
  { name: 'Spring Cloud', level: 85, color: '#6db33f' },
  { name: 'MySQL', level: 88, color: '#4479a1' },
  { name: 'Redis', level: 80, color: '#dc382d' },
  { name: 'Maven/Gradle', level: 85, color: '#c71a36' },
  { name: 'Docker', level: 75, color: '#2496ed' },
  { name: 'Git', level: 80, color: '#f05032' }
]

// 经历数据
const experiences = [
  {
    year: '2023年3月 - 2023年7月',
    title: '高级Java开发工程师',
    company: '某科技公司',
    description:
      '设计商品、订单、用户、库存等数据库表结构，并通过 MyBatis Plus 实现高效的数据访问；使用 Redis 实现商品详情、库存等热点数据缓存，缓解高并发读压力；实现定时任务，自动关闭超时未支付订单，释放库存。'
  }
]

// 联系方式
const contactInfo = [
  {
    icon: 'youxiang',
    label: '邮箱',
    value: '1752597830@qq.com',
    link: 'tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1752597830&website=www.oicqzone.com'
  },
  {
    icon: 'weixin',
    label: '微信',
    value: 'sin²+cos²',
    link: 'http://silent-moment.site/img/admin/c184a7843953882c65f82ea566f4151.png'
  },
  {
    icon: 'github',
    label: 'GitHub',
    value: '忙里偷闲的sin',
    link: 'https://github.com/1752597830'
  },
  {
    icon: 'gitee',
    label: 'Gitee',
    value: '忙里偷闲的sin',
    link: 'https://gitee.com/silent-moment'
  }
]

onMounted(async () => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <ContentSkeleton v-if="loading" />
  <div v-else class="min-h-[calc(100vh-96px)] p-4 md:p-8">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1
        class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4"
      >
        关于我
      </h1>
      <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
        热爱技术，专注于Java后端开发，喜欢分享知识和经验
      </p>
    </div>

    <!-- 标签页导航 -->
    <div class="flex flex-wrap justify-center gap-2 mb-8">
      <button
        v-for="tab in ['about', 'skills', 'experience', 'contact']"
        :key="tab"
        @click="activeTabClick(tab as any)"
        :class="[
          'px-6 py-3 rounded-lg font-medium transition-all duration-300',
          activeTab === tab
            ? 'bg-blue-600 text-white shadow-lg'
            : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
        ]"
      >
        {{
          tab === 'about'
            ? '关于我'
            : tab === 'skills'
              ? '技能'
              : tab === 'experience'
                ? '经历'
                : '联系'
        }}
      </button>
    </div>

    <!-- 内容区域 -->
    <div class="max-w-4xl mx-auto">
      <!-- 关于我 -->
      <div v-if="activeTab === 'about'" class="space-y-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
          <div class="flex flex-col md:flex-row gap-8 items-center">
            <div
              class="w-48 h-48 rounded-full bg-gradient-to-br from-blue-400 to-purple-600 flex items-center justify-center text-white text-6xl font-bold shadow-lg"
            >
              <img
                :src="webInfo?.avatar"
                alt="头像"
                class="w-full h-full object-cover rounded-full"
              />
            </div>
            <div class="flex-1 space-y-4">
              <!-- 个人简历查看按钮 - 单独一行，靠右显示 -->
              <div class="flex justify-between items-center pt-2">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
                  {{ webInfo?.nickname || '博主' }}
                </h2>
                <a
                  href="http://silent-moment.site/img/admin/resume.pdf"
                  target="_blank"
                  class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"
                >
                  查看简历
                </a>
              </div>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                你好！我是一名充满激情的后端开发工程师，专注于Java技术栈和分布式系统开发。
                我热爱编程，喜欢探索新技术，并且热衷于构建高性能、高可用的企业级应用系统。
              </p>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                在这个博客中，我会分享我的Java开发心得、架构设计经验和技术学习笔记。
                希望通过这些内容能够帮助到同样热爱Java开发的朋友们，也欢迎大家一起交流讨论。
              </p>
              <div class="flex flex-wrap gap-2">
                <span
                  class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm"
                >
                  后端开发
                </span>
                <span
                  class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm"
                >
                  Java
                </span>
                <span
                  class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm"
                >
                  Spring Boot
                </span>
                <span
                  class="px-3 py-1 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full text-sm"
                >
                  微服务架构
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 兴趣爱好 -->
        <div class="grid md:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center">
              <span class="mr-2">🎯</span> 技术追求
            </h3>
            <ul class="space-y-2 text-gray-600 dark:text-gray-300">
              <li>• 持续学习新技术和最佳实践</li>
              <li>• 追求代码质量和用户体验</li>
              <li>• 参与开源项目和技术社区</li>
              <li>• 分享技术知识和经验</li>
            </ul>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center">
              <span class="mr-2">🌟</span> 个人爱好
            </h3>
            <ul class="space-y-2 text-gray-600 dark:text-gray-300">
              <li>• 阅读技术书籍和博客</li>
              <li>• 参加技术会议和Meetup</li>
              <li>• 旅行</li>
              <li>• 电影</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 技能 -->
      <div v-if="activeTab === 'skills'" class="space-y-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">技术技能</h2>
          <div class="space-y-6">
            <div v-for="skill in skills" :key="skill.name" class="space-y-2">
              <div class="flex justify-between items-center">
                <span class="font-medium text-gray-700 dark:text-gray-300">{{ skill.name }}</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">{{ skill.level }}%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                <div
                  class="h-3 rounded-full transition-all duration-1000 ease-out"
                  :style="{
                    width: `${skill.level}%`,
                    backgroundColor: skill.color
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 技术栈 -->
        <div class="grid md:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">核心技术</h3>
            <div class="space-y-3">
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">Java 8/11/17</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟练</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">Spring Framework</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟练</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">Spring Boot</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟练</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">Spring Cloud</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟练</span>
              </div>
            </div>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">数据库与中间件</h3>
            <div class="space-y-3">
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">MySQL / PostgreSQL</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟练</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">Redis / MongoDB</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟练</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">RabbitMQ / Kafka</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟练</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-300">Elasticsearch</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">熟悉</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 经历 -->
      <div v-if="activeTab === 'experience'" class="space-y-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">工作经历</h2>
          <div class="space-y-8">
            <div v-for="(exp, index) in experiences" :key="index" class="relative">
              <div class="flex flex-col md:flex-row gap-4">
                <div class="md:w-32 flex-shrink-0">
                  <span
                    class="inline-block px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium"
                  >
                    {{ exp.year }}
                  </span>
                </div>
                <div class="flex-1">
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">
                    {{ exp.title }}
                  </h3>
                  <p class="text-blue-600 dark:text-blue-400 font-medium mb-3">
                    {{ exp.company }}
                  </p>
                  <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                    {{ exp.description }}
                  </p>
                </div>
              </div>
              <div
                v-if="index < experiences.length - 1"
                class="hidden md:block absolute left-16 top-12 w-0.5 h-8 bg-gray-300 dark:bg-gray-600"
              ></div>
            </div>
          </div>
        </div>

        <!-- 教育背景 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">教育背景</h3>
          <div class="space-y-4">
            <div class="flex flex-col md:flex-row gap-4">
              <div class="md:w-32 flex-shrink-0">
                <span
                  class="inline-block px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm font-medium"
                >
                  2023 - 2026
                </span>
              </div>
              <div class="flex-1">
                <h4 class="text-lg font-semibold text-gray-800 dark:text-white">计算材料</h4>
                <p class="text-gray-600 dark:text-gray-300">西安工业大学 · 硕士</p>
              </div>
            </div>
          </div>
          <div class="space-y-4">
            <div class="flex flex-col md:flex-row gap-4">
              <div class="md:w-32 flex-shrink-0">
                <span
                  class="inline-block px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm font-medium"
                >
                  2019 - 2023
                </span>
              </div>
              <div class="flex-1">
                <h4 class="text-lg font-semibold text-gray-800 dark:text-white">
                  计算机科学与技术
                </h4>
                <p class="text-gray-600 dark:text-gray-300">西安工业大学北方信息工程学院 · 本科</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系 -->
      <div v-if="activeTab === 'contact'" class="space-y-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">联系我</h2>
          <div class="grid md:grid-cols-2 gap-6">
            <div
              v-for="contact in contactInfo"
              :key="contact.label"
              class="flex items-center space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
            >
              <Icon :name="contact.icon" width="32" height="32" />
              <!-- <span class="text-2xl">{{ contact.icon }}</span> -->
              <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-white">{{ contact.label }}</p>
                <a
                  v-if="contact.link"
                  :href="contact.link"
                  target="_blank"
                  class="text-blue-600 dark:text-blue-400 hover:underline"
                >
                  {{ contact.value }}
                </a>
                <p v-else class="text-gray-600 dark:text-gray-300">{{ contact.value }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 留言表单 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-6">给我留言</h3>
          <form class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                >昵称</label
              >
              <input
                type="text"
                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder="请输入您的昵称"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                >邮箱</label
              >
              <input
                type="email"
                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder="请输入您的邮箱"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                >留言内容</label
              >
              <textarea
                rows="4"
                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder="请输入您的留言内容"
              ></textarea>
            </div>
            <button
              type="submit"
              class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-300"
            >
              发送留言
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.scrollbar::-webkit-scrollbar {
  width: 5px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #f90;
  border-radius: 10px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #eee;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.scrollbar::-webkit-scrollbar-button {
  display: none;
}

.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #f90 #eee;
}

/* 夜间模式滚动条优化 */
html.dark .scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
}

html.dark .scrollbar::-webkit-scrollbar-track {
  background-color: #1e1e1e;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.05);
}

/* Firefox 支持 */
html.dark .scrollbar {
  scrollbar-color: #2788c4 #1e1e1e;
}

/* 移动端优化：隐藏滚动条，但可滚动 */
@media (max-width: 768px) {
  .scrollbar::-webkit-scrollbar {
    width: 0px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

  .scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .scrollbar {
    scrollbar-width: none;
  }

  .scrollbar:hover::-webkit-scrollbar {
    width: 5px;
  }

  .scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #f90;
  }
}

/* 添加一些动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bg-white,
.bg-gray-800 {
  animation: fadeInUp 0.6s ease-out;
}

/* 技能条动画 */
.w-full.bg-gray-200 .h-3 {
  animation: slideIn 1s ease-out;
}

@keyframes slideIn {
  from {
    width: 0%;
  }
  to {
    width: var(--skill-level);
  }
}
</style>
